<template>
	<view>
		<view class="list_after">
			<view class="after_top">
				<image class="images" src="" mode=""></image>
				<text class="name">山东榴弹制烟花研发制造集团</text>
				<text class="name status">处理中</text>
			</view>
			<view class="after_center">
				<image class="center_img" src="" mode=""></image>
				<text class="titles">电视剧《如意芳霏》官方周边衍生品珠宝黄金纯度极高198g</text>
				<text class="center_mar sfk">实付款：</text>
				<text class="center_mar fh">¥</text>
				<text class="center_mar">283.92</text>
				<text class="center_num">x1</text>
			</view>
				<view class="after_bottom">
					<text class="bottom_status">退款退货</text>
					<text class="bottom-btn" @click="tkth(0)">查看详情</text>
					<text class="bottom-btn">撤回申请</text>
				</view>
		</view>
		<view class="list_after">
			<view class="after_top">
				<image class="images" src="" mode=""></image>
				<text class="name">山东榴弹制烟花研发制造集团</text>
				<text class="name status">卖家拒绝退货</text>
			</view>
			<view class="after_center">
				<image class="center_img" src="" mode=""></image>
				<text class="titles">电视剧《如意芳霏》官方周边衍生品珠宝黄金纯度极高198g</text>
				<text class="center_mar sfk">实付款：</text>
				<text class="center_mar fh">¥</text>
				<text class="center_mar">283.92</text>
				<text class="center_num">x1</text>
			</view>
			<view class="after_bottom">
				<text class="bottom_status">退款退货</text>
				<text class="bottom-btn">客服介入</text>
				<text class="bottom-btn"  @click="tkth(5)">再次申请</text>
			</view>
		</view>
		<view class="list_after">
			<view class="after_top">
				<image class="images" src="" mode=""></image>
				<text class="name">山东榴弹制烟花研发制造集团</text>
				<text class="name status">卖家同意退货</text>
			</view>
			<view class="after_center">
				<image class="center_img" src="" mode=""></image>
				<text class="titles">电视剧《如意芳霏》官方周边衍生品珠宝黄金纯度极高198g</text>
				<text class="center_mar sfk">实付款：</text>
				<text class="center_mar fh">¥</text>
				<text class="center_mar">283.92</text>
				<text class="center_num">x1</text>
			</view>
			<view class="after_bottom">
				<text class="bottom_status">退款退货</text>
				<text class="bottom-btn"  @click="tkth(1)">填写地址</text>
			</view>
		</view>
		<view class="list_after">
			<view class="after_top">
				<image class="images" src="" mode=""></image>
				<text class="name">山东榴弹制烟花研发制造集团</text>
				<text class="name status">买家已发货</text>
			</view>
			<view class="after_center">
				<image class="center_img" src="" mode=""></image>
				<text class="titles">电视剧《如意芳霏》官方周边衍生品珠宝黄金纯度极高198g</text>
				<text class="center_mar sfk">实付款：</text>
				<text class="center_mar fh">¥</text>
				<text class="center_mar">283.92</text>
				<text class="center_num">x1</text>
			</view>
			<view class="after_bottom">
				<text class="bottom_status">退款退货</text>
				<text class="bottom-btn" @click="tkth(2)">查看详情</text>
			</view>
		</view>
		<view class="list_after">
			<view class="after_top">
				<image class="images" src="" mode=""></image>
				<text class="name">山东榴弹制烟花研发制造集团</text>
				<text class="name status">卖家已收货</text>
			</view>
			<view class="after_center">
				<image class="center_img" src="" mode=""></image>
				<text class="titles">电视剧《如意芳霏》官方周边衍生品珠宝黄金纯度极高198g</text>
				<text class="center_mar sfk">实付款：</text>
				<text class="center_mar fh">¥</text>
				<text class="center_mar">283.92</text>
				<text class="center_num">x1</text>
			</view>
			<view class="after_bottom">
				<text class="bottom_status">退款退货</text>
				<text class="bottom-btn" @click="tkth(3)">查看详情</text>
			</view>
		</view>
		<view class="list_after">
			<view class="after_top">
				<image class="images" src="" mode=""></image>
				<text class="name">山东榴弹制烟花研发制造集团</text>
				<text class="name status">已退款</text>
			</view>
			<view class="after_center">
				<image class="center_img" src="" mode=""></image>
				<text class="titles">电视剧《如意芳霏》官方周边衍生品珠宝黄金纯度极高198g</text>
				<text class="center_mar sfk">实付款：</text>
				<text class="center_mar fh">¥</text>
				<text class="center_mar">283.92</text>
				<text class="center_num">x1</text>
			</view>
			<view class="after_bottom">
				<text class="bottom_status">退款退货</text>
				<text class="bottom-btn" @click="tkth(4)">查看详情</text>
			</view>
		</view>
		<view class="list_after">
			<view class="after_top">
				<image class="images" src="" mode=""></image>
				<text class="name">山东榴弹制烟花研发制造集团</text>
				<text class="name status">处理中</text>
			</view>
			<view class="after_center">
				<image class="center_img" src="" mode=""></image>
				<text class="titles">电视剧《如意芳霏》官方周边衍生品珠宝黄金纯度极高198g</text>
				<text class="center_mar sfk">实付款：</text>
				<text class="center_mar fh">¥</text>
				<text class="center_mar">283.92</text>
				<text class="center_num">x1</text>
			</view>
			<view class="after_bottom">
				<text class="bottom_status">仅退款</text>
				<text class="bottom-btn"  @click="jtk(0)">查看详情</text>
				<text class="bottom-btn">撤回申请</text>
			</view>
		</view>
		<view class="list_after">
			<view class="after_top">
				<image class="images" src="" mode=""></image>
				<text class="name">山东榴弹制烟花研发制造集团</text>
				<text class="name status">卖家同意退款</text>
			</view>
			<view class="after_center">
				<image class="center_img" src="" mode=""></image>
				<text class="titles">电视剧《如意芳霏》官方周边衍生品珠宝黄金纯度极高198g</text>
				<text class="center_mar sfk">实付款：</text>
				<text class="center_mar fh">¥</text>
				<text class="center_mar">283.92</text>
				<text class="center_num">x1</text>
			</view>
			<view class="after_bottom">
				<text class="bottom_status">仅退款</text>
				<text class="bottom-btn" @click="jtk(1)">查看详情</text>
			</view>
		</view>
		<view class="list_after">
			<view class="after_top">
				<image class="images" src="" mode=""></image>
				<text class="name">山东榴弹制烟花研发制造集团</text>
				<text class="name status">已退款</text>
			</view>
			<view class="after_center">
				<image class="center_img" src="" mode=""></image>
				<text class="titles">电视剧《如意芳霏》官方周边衍生品珠宝黄金纯度极高198g</text>
				<text class="center_mar sfk">实付款：</text>
				<text class="center_mar fh">¥</text>
				<text class="center_mar">283.92</text>
				<text class="center_num">x1</text>
			</view>
			<view class="after_bottom">
				<text class="bottom_status">仅退款</text>
				<text class="bottom-btn" @click="jtk(2)">查看详情</text>
			</view>
		</view>
		<!-- 绑定自定义属性传递数据 -->
		<!-- <cards v-for="(item,index) in shoplist" :shoplist="item" :key="index"></cards> -->
	</view>
</template>

<script>
	//引入子组件
	import cards from "../../../uni_modules/uni-cards/components/card.vue"
	export default {
		data() {
			return {
				shoplist: [{
						"name": '1',
						"status": '处理中',
						"title": '电视剧《如意芳霏》官方周边衍生品珠宝黄金纯度极高198g',
						"money": '283.92',
						"num": '1',
						"bottomtext": '退款退货',
						"btn": '撤回申请',
						"photo": '../../../static/me/ysf.png',
						"cover": '../../../static/me/ysf.png',
					},
					{
						"name": '2',
						"status": '处理中',
						"title": '电视剧《如意芳霏》官方周边衍生品珠宝黄金纯度极高198g',
						"money": '283.92',
						"num": '1',
						"bottomtext": '退款退货',
						"btn": '撤回申请',
						"photo": '../../../static/me/ysf.png',
						"cover": '../../../static/me/ysf.png',
					},
					{
						"name": '3',
						"status": '处理中',
						"title": '电视剧《如意芳霏》官方周边衍生品珠宝黄金纯度极高198g',
						"money": '283.92',
						"num": '1',
						"bottomtext": '退款退货',
						"btn": '撤回申请',
						"photo": '../../../static/me/ysf.png',
						"cover": '../../../static/me/ysf.png',
					},
					{
						"name": '4',
						"status": '处理中',
						"title": '电视剧《如意芳霏》官方周边衍生品珠宝黄金纯度极高198g',
						"money": '283.92',
						"num": '1',
						"bottomtext": '退款退货',
						"btn": '撤回申请',
						"photo": '../../../static/me/ysf.png',
						"cover": '../../../static/me/ysf.png',
					}
				]
			}
		},
		components: {
			cards //注册子组件
		},
		methods: {
			jtk(i) {
				uni.navigateTo({
					url: 'refund_only?pages=' + i
				})
			},
			tkth(i){
				uni.navigateTo({
					url: 'refund_and_return?pages=' + i
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F5F5F5;
	}

	.list_after {
		width: 706rpx;
		height: 407rpx;
		background: #FFFFFF;
		opacity: 1;
		margin: auto;
		margin-top: 25rpx;
		border-radius: 16px;
	}

	.after_top {
		width: 663rpx;
		height: 79rpx;
		margin: auto;
		border-bottom: 1px solid #EEEEEE;
	}

	.images {
		width: 36rpx;
		height: 36rpx;
		background: #F5F5F5;
		border-radius: 50%;
		float: left;
		margin: 21rpx 14rpx 21rpx 0;
	}

	.name {
		width: 416rpx;
		height: 79rpx;
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #21201D;
		opacity: 0.65;
		display: inline-block;
		float: left;
		line-height: 79rpx;
		overflow: hidden;
	}

	.status {
		color: #EB3E3E;
		float: right;
		width: auto;
	}

	.after_center {
		width: 663rpx;
		height: 226rpx;
		margin: auto;
		border-bottom: 1px solid #EEEEEE;
	}

	.center_img {
		width: 173rpx;
		height: 173rpx;
		border-radius: 7rpx;
		float: left;
		margin-top: 25rpx;
		background: #F5F5F5;
	}

	.titles {
		width: 460rpx;
		height: 72rpx;
		font-size: 25rpx;
		font-family: PingFang SC;
		font-weight: 500;
		line-height: 36rpx;
		color: #21201D;
		opacity: 1;
		margin-top: 25rpx;
		margin-left: 28rpx;
		overflow: hidden;
		display: inline-block;
		float: left;
	}

	.center_mar {
		margin-top: 54rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #EB3E3E;
		opacity: 1;
		display: inline-block;
	}

	.sfk {
		margin-left: 28rpx;
		font-size: 21rpx;
		color: #999999;
	}

	.fh {
		color: #999999;
		font-size: 21rpx;
		color: #EB3E3E;
	}

	.center_num {
		font-size: 21rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
		opacity: 1;
		float: right;
		margin-top: 61rpx;
	}

	.after_bottom {
		width: 663rpx;
		margin-left: 25rpx;
	}

	.bottom_status {
		color: #999999;
		font-size: 21rpx;
		display: inline-block;
		margin-top: 36rpx;
	}

	.bottom-btn {
		padding: 0rpx 28rpx 0rpx 28rpx;
		background: #FFFFFF;
		border-radius: 25rpx;
		border: 1rpx solid #EEEEEE;
		font-size: 21rpx;
		text-align: center;
		line-height: 61rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #21201D;
		float: right;
		margin-top: 19rpx;
		margin-left: 14rpx;
	}
</style>
